<template>
  <div class="examine-result-container">
    <HeaderIndex title="审核结果" />
    <div class="result-content">
      <div class="select-type-text">
        <div class="select-type-text-item">
          <span>行业</span>
          <span>{{ verifyData.trade }}</span>
        </div>
        <div class="select-type-text-item">
          <span>地域</span>
          <span>{{ verifyData.region }}</span>
        </div>
      </div>
      <div class="result-type">
        <div class="result-type-item">
          <p>
            <span class="disable-class catch-the-eye">{{ getErrorDataSize("disable") }}</span
            >处
          </p>
          <p>禁用类</p>
        </div>
        <div class="result-type-item">
          <p>
            <span class="higher-risk-category catch-the-eye">{{ getErrorDataSize("risk") }}</span
            >处
          </p>
          <p>风险较高类</p>
        </div>
        <div class="result-type-item">
          <p>
            <span class="evidence-support-class catch-the-eye">{{ getPropNum.length }}</span
            >处
          </p>
          <p>证据支撑类</p>
        </div>
        <div class="result-type-item">
          <p>
            <span class="higher-regulation-category catch-the-eye">{{ getErrorDataSize("regulation") }}</span
            >处
          </p>
          <p>违反内部规定</p>
        </div>
      </div>
      <div class="introduce" v-html="content"></div>
      <div class="problem-details">
        <h3>问题详情</h3>
        <template v-if="typeList.length">
          <div class="problem-details-item" v-for="(item, i) in typeList" :key="i">
            <div class="problem-details-item-title" @click="handleRotate(i)">
              <span :class="item.className">[{{ item.tab }}]{{ item.subType === "num" ? "数字" : item.keyword }}</span>
              <span :class="{ 'rotate-active': i === index }"><em class="iconfont icon-youjiantou" /></span>
            </div>
            <div class="problem-details-item-info" v-show="i === index">
              <p>
                <span>风险等级</span>
                <span>{{ item.data?.wordInfo?.wordType }}</span>
              </p>
              <p>
                <span>处罚依据/内部管理办法依据</span>
                <span>{{ item.data?.wordInfo?.punishGist }}</span>
              </p>
              <p>
                <span>处罚范围/具体规定</span>
                <span>{{ item.data?.wordInfo?.punishRange }}</span>
              </p>
              <p v-if="item.data?.wordInfo?.suggestWord">
                <span>建议替代词/提示内容</span>
                <span>{{ item.data.wordInfo.suggestWord }}</span>
              </p>
              <p>
                <span>涉及案例</span>
                <span>
                  <p
                    class="cases-involved-item"
                    v-for="lawCasesItem in item.data?.lawCases"
                    :key="lawCasesItem.id"
                    @click="handleDisplayCasesInvolved(lawCasesItem)"
                  >
                    {{ lawCasesItem.caseName }}
                  </p>
                </span>
              </p>
            </div>
          </div>
        </template>
      </div>
      <div class="audit-instructions">
        <h2>通用审核须知</h2>
        <ul class="audit-instructions-list">
          <li class="audit-instructions-item" v-for="(ains, ainsIndex) in auditInstructionsArr" :key="ainsIndex">
            <div class="ains-left">
              <span>{{ ainsIndex + 1 }}</span>
            </div>
            <div class="ains-right">
              <h3>{{ ains.title }}</h3>
              <p v-if="ains.content">{{ ains.content }}</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="disclaimers">
        <span>免责声明：</span>
        <span
          >本功能提供的广告文案审核结果仅供参考，不构成任何法律意见或对广告合规性的保证。具体广告宣传方案请通过法律信息平台-法律支撑-宣传策划提交审核。</span
        >
      </div>
    </div>
    <van-action-sheet v-model="displayCasesInvolved" title="涉及案例">
      <div class="cases-involved-content">
        <p>
          <span>案例名称</span>
          <span>{{ casesInvolvedData.caseName }}</span>
        </p>
        <p>
          <span>违规广告内容</span>
          <span>{{ casesInvolvedData.caseContent }}</span>
        </p>
        <p>
          <span>违反法律规定</span>
          <span>{{ casesInvolvedData.caseStipulate }}</span>
        </p>
        <p>
          <span>处罚依据/内部管理办法依据</span>
          <span>{{ casesInvolvedData.caseGist }}</span>
        </p>
        <p>
          <span>行政机关名称</span>
          <span>{{ casesInvolvedData.caseUnit }}</span>
        </p>
        <p>
          <span>处罚结果</span>
          <span>{{ casesInvolvedData.caseResult }}</span>
        </p>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import HeaderIndex from "@/components/header";
import { getExamineResult } from "@/api";
import { Toast } from "@/utils";

//类型类名
const TYPE_CLASS_NAME = {
  disable: "disable-class-con",
  risk: "higher-risk-category-con",
  prop: "evidence-support-class-con",
  propNum: "evidence-support-class-con",
  regulation: "higher-regulation-category-con",
};

// 错误类型数据名清单
const ERROR_TYPE_SET = new Set(["disable", "risk", "prop", "propNum", "regulation"]);

export default {
  name: "ExamineResult",
  components: {
    HeaderIndex,
  },
  data() {
    return {
      index: "", //下标
      content: "", //内容
      typeList: [], //所有类型数据
      displayCasesInvolved: false, //显示案例
      casesInvolvedData: {}, //案例详情数据
      verifyData: {}, // 校验数据
      auditInstructionsArr: [
        {
          title: "广告中不得使用绝对化用语",
          content: "广告中禁止使用“国家级”、“最高级”、“最佳”、“顶级”、“第一品牌”、“极品”、“至尊”、“最受欢迎”、“极致”等绝对化用语",
        },
        {
          title: "不得投放虚假或引人误解的广告",
          content:
            "所推广商品或服务需真实、有效，不得欺骗、误导消费者。不得有任何虚构原价、虚假折扣等价格欺诈以及虚假营销的行为，不得投放与市场价格差异过大，价格超低或明显造假的商品。不得对产品或服务的效果做保证性承诺的表述。如；出门必备、小孩必学等",
        },
        {
          title: "广告使用数据、统计资料、调查结果、文摘、引用语等引证内容，应真实、准确，并表明出处",
          content:
            "对商品的描述应当有合理有效的证明资料支持，不可捏造或夸大内容，不可使用违背事实认知或逻辑的描述。引用的各种数据、结果、证明等应当标明“数据来源”，该类内容有适用范围和有效期间的，也应当标明。",
        },
        {
          title: "不得使用易引人误解的广告创意，故意欺骗、误导消费者",
          content:
            "广告应当具有可识别性，能够使消费者辨明其为广告。广告素材上不得利用图标或按钮的操作功能误导用户，诱骗用户点击广告。广告文案不得使用模拟好友关系链的文案，使消费者误以为是自己好友在进行邀请。如：“亲爱的XXX，你的好友XX邀请你进行一起进行活动”等；广告页面不得仿照知名品牌网站链接或者知名品牌网站设计，以诱导用户点击或购买。",
        },
        {
          title: "不得贬低其他生产经营者的商品或者服务，不得有直接或间接对比行为",
          content: "",
        },
        {
          title: "不得在广告中出现“驰名商标”字样；不得出现“国家免检产品”等涉及质量免检的内容",
          content: "",
        },
        {
          title: "不得使用未经授权的第三方形象或标识",
          content:
            "广告素材或落地页使用他人名义或者形象的，应当事先取得其书面同意；广告素材或落地页涉及第三方logo、名称、产品、服务，包括但不限于时尚品牌、知名动漫、游戏素材、知名剧照、军事图片等，应当事先取得其授权证明。",
        },
        {
          title: "不得损害国家、民族、社会的形象、利益及安全",
          content:
            "禁止使用或者变相使用中华人民共和国的国旗、国歌、国徽，军旗、军歌、军徽；禁止使用或者变相使用国家机关、国家机关工作人员的名义或者形象；禁止使用党和政府、人大、政协、审判机关、检察机关、军队、武警、其他国家机关及国家机关工作人员的形象做推荐或者广告素材；禁止利用与国家机关有密切关联的特定地点名称（如中南海）或者标志性建筑物的名称；禁止损害国家的尊严或者利益，泄露国家秘密；，不能利用时政事件进行商品或品牌宣传。",
        },
        {
          title: "不得违背社会精神文明建设要求，不得违背社会风尚良俗",
          content: "",
        },
        {
          title: "营销行为要规范",
          content:
            "不得使用名不副实的“0元、免费、不限量、永久”等容易引发客户误解的表述进行宣传，严禁隐瞒、模糊、淡化限制性条件。落实“两个严禁”（严禁不知情定制、严禁不规范外呼），推动“两个强化”（强化正面宣传、强化渠道管理），强化“五个必须”（体验营销必须正向确认和到期主动提醒，关键信息必须提醒到位，资费必须清晰展陈，业务必须受理便捷，营销承诺必须按约履行）。",
        },
        {
          title: "广告内容要真实准确",
          content:
            "严禁夸大或隐晦营销，不准刻意夸大业务优势、优惠力度或隐瞒涉及客户权益的内容。广告中使用词汇“国内”时，广告创意不得侵犯他人名誉权、肖像权、知识产权等权利；严禁未经授权使用他人肖像、注册商标和作品等。不得在广告中贬低和诋毁他人的产品或者服务，损害他人的商业信誉和商品声誉。",
        },
        {
          title: "资费套餐描述要详实具体",
          content:
            "需明确标示出套餐名称、月费、套内资源、套外资费标准、有效期、目标客户。套餐月费、最低消费、套餐内包含的业务量或单价、套餐外业务单价水平不得以数据区间形式标示。",
        },
      ], //审核须知
    };
  },
  mounted() {
    try {
      Toast.startLoading();
      //获取校验数据
      const verifyData = this.getLocalStorageData();
      this.verifyData = verifyData;

      //问题详情赋值
      this.content = verifyData.content;

      //依据指定的类型进行数据格式化
      this.typeList = this.formatterData(verifyData);

      //将文本中的关键字使用唯一标识替换、保存唯一标识
      this.typeList.forEach((item) => {
        const uId = `[${Math.random().toString(36).substring(2)}]`;
        this.content = this.content.replace(item.keyword, uId);
        item["uId"] = uId;
      });

      //再次将文本中的唯一标识替换为对应的标签、请求关键字数据
      this.typeList.forEach((item) => {
        this.content = this.content.replace(item.uId, item.label);

        this.getExamineResultData(item);
      });

      //获取查到的第一个propNum值
      const propNumVal = this.typeList?.find((item) => item.subType === "num");

      //过滤propNum数据
      const filterArr = this.typeList?.filter((item) => !item.subType) ?? [];

      //新数组，过滤为空的内容
      this.typeList = [...filterArr, propNumVal].filter((f) => f);
    } finally {
      Toast.closeLoading();
    }
  },
  computed: {
    /**
     * 获取证据支撑类数据长度
     */
    getPropNum() {
      const { prop = [], propNum = [] } = this.verifyData || {};
      return [...prop, ...propNum];
    },
  },
  methods: {
    /**
     * 获取缓存数据
     */
    getLocalStorageData() {
      return JSON.parse(localStorage.getItem("resultData") ?? "{}");
    },
    /**
     * 获取错误数据长度
     */
    getErrorDataSize(errKey) {
      const errData = this.verifyData[errKey];

      // 若未取到值或值不是数组，直接返回0
      if (!errData || !Array.isArray(errData)) {
        return 0;
      }

      return errData.length;
    },
    /**
     * 展开收起详情数据
     * @param {*} index 下标
     */
    handleRotate(index) {
      this.index = this.index !== index ? index : "";
    },

    /**
     * 获取审核结果数据
     * @param {*} item 每一项数据
     */
    async getExamineResultData(item) {
      const { keyword, subType, type } = item;
      //请求
      item.data =
        (await getExamineResult({
          wordKey: keyword,
          subType,
          type,
        })) || {};
    },

    /**
     * 显示案例
     * @param {*} lawCases 案例信息
     */
    handleDisplayCasesInvolved(lawCases) {
      this.displayCasesInvolved = !this.displayCasesInvolved;
      this.casesInvolvedData = lawCases;
    },

    /**
     * 格式化数据
     * @param {*} verifyData 需要格式化的数据
     * 原始数据中，包含多种错误类型数据，但只包含了替换词和词出现的位置
     * 错误数据样例：
     * verifyData = {content:'XXXXX', err1:[{start:0, end:1, keyword:'XXX'}], err2:[{start:3, end:4, keyword:'XXX'}]}
     *
     * 需要对数据进行处理：
     * 1、依据错误类型清单，整合所有错误数据
     * 2、添加显示到 dom 中的样式名 className，为着色使用
     * 3、添加错误类型 type
     * 4、添加当前错误类型的html渲染内容 label
     *
     * 处理后数据样例：
     * errorData = [
     *  {tab:1, start:0, end:1, keyword:'XXX', type:'err1', className:'class1', label:'<span class="class1">XXX</span>'},
     *  {tab:2, start:3, end:4, keyword:'XXX', type:'err2', className:'class2', label:'<span class="class2">XXX</span>'}
     * ]
     */
    formatterData(verifyData) {
      // 依据处理清单 ERROR_TYPE_SET 中包含的属性，整合排序数据
      return Object.entries(verifyData)
        .flatMap(([key, value]) => {
          if (ERROR_TYPE_SET.has(key)) {
            return value.map((item) => ({
              ...item,
              type: key,
              className: TYPE_CLASS_NAME[key],
              subType: key === "propNum" ? "num" : "",
            }));
          }
          return [];
        })
        .sort((a, b) => a.start - b.start)
        .map((value, index) => createErrorItem(value, index));
    },

    /**
     * 创建对应错误类型数据内容
     * 添加序号 tab
     * 添加HTML渲染内容 label
     */
    createErrorItem(value, index) {
      const tab = index + 1;
      const { className, keyword } = value;
      const label = `<span><em class="${className}">${keyword}</em><em class="tab">[${tab}]</em></span>`;
      return {
        ...value,
        tab,
        label,
        data: [],
      };
    },
  },
};
</script>

<style lang="less">
@import url("~@/assets/styles/examineResult/index.less");
</style>
